<template>
  <div class="yrfm-list-aside">
    <div v-if="selectGroup.hasOwnProperty('groupId')" class="tab-title">
      <icon-svg name="iconReturn" @click.native="prev"></icon-svg>
      {{ selectGroup.groupNm }}
    </div>
    <el-input v-model="assetNm" placeholder="输入搜索关键字" @keyup.native.enter="search">
      <i class="el-icon-close" slot="suffix" @click="clearSearch" v-if="assetNm.length"></i>
      <el-button slot="append" @click="getList"><icon-svg name="iconSearch"></icon-svg></el-button>
    </el-input>
    <template v-if="list.length || groupList.length">
      <ul>
        <template v-if="selectGroup.hasOwnProperty('groupId')">
          <template v-if="list.length">
            <li
              v-for="item in list"
              :key="item.assetId"
              :draggable="!preview"
              @dragstart="copyDrag($event, item)"
              class="drag-item tag-item"
            >
              <div class="asset-name">{{ item.assetNm }}</div>
              <div class="list-handler">
                <el-tooltip effect="dark" content="添加" placement="top" :enterable="false" v-if="!preview">
                  <span class="plus" @click.prevent="$emit('addItem', item)"><i class="el-icon-plus"></i></span>
                </el-tooltip>
                <el-tooltip effect="dark" placement="top" :enterable="false">
                  <span slot="content">
                    口径：{{ item.bizStmt }}
                    <template v-if="item.plfmDataDate">
                      <br />
                      <br />
                      数据日期: {{ item.plfmDataDate }}
                    </template>
                  </span>
                  <icon-svg name="iconPreview"></icon-svg>
                </el-tooltip>
              </div>
            </li>
          </template>
          <p v-else>{{ $parent.$parent.$parent.loading ? '' : '暂无内容' }}</p>
        </template>
        <template v-else>
          <li
            v-for="item in showGroupList"
            :key="item.groupId"
            class="drag-item tag-item"
            @click="handleSelectGroup(item)"
          >
            <div class="asset-name">{{ item.groupNm }}</div>
            <i class="el-icon-arrow-right"></i>
          </li>
        </template>
      </ul>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="params.currentPageNum"
        :page-size="params.pageSize"
        :pager-count="5"
        background
        layout="total, prev, pager, next"
        small
        :total="totalSize"
      >
      </el-pagination>
    </template>
    <p v-else>{{ $parent.$parent.$parent.loading ? '' : '暂无内容' }}</p>
  </div>
</template>

<script>
export default {
  props: {
    preview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      groupList: [],
      showGroupList: [],
      list: [],
      selectGroup: {},
      assetNm: '',
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.params.currentPageNum = val
      this.getTagList()
    },
    handleSelectGroup(group) {
      this.selectGroup = group
      this.assetNm = ''
      this.resetParams()
      this.getTagList()
    },
    getList() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagDerivedGroup/getAllGroup/2'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.groupList = [{ groupId: 0, groupNm: '默认分组' }, ...data.data]
          this.setGroupList()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getTagList() {
      this.$emit('toggleLoading', true)
      // this.resetParams()
      this.params.queryParams.groupId = this.selectGroup.groupId
      if (this.assetNm.trim()) this.params.queryParams.tagNm = this.assetNm.trim()
      this.$ajax({
        url: this.$ajax.setUrl('tagFactory/getDerLabel'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.list = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.$emit('toggleLoading', false)
      })
    },
    search() {
      if (this.selectGroup.hasOwnProperty('groupId')) {
        this.resetParams()
        this.getTagList()
      } else {
        this.setGroupList()
      }
    },
    setGroupList() {
      this.showGroupList = this.groupList.filter(item =>
        item.groupNm.toLowerCase().includes(this.assetNm.toLowerCase())
      )
    },
    resetParams() {
      this.params = {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      }
    },
    clearSearch() {
      this.assetNm = ''
      this.search()
    },
    copyDrag(event, item) {
      this.$emit('drag', event, item)
    },
    prev() {
      this.assetNm = ''
      this.selectGroup = {}
      this.list = []
      this.resetParams()
      this.setGroupList()
    }
  }
}
</script>

<style lang="scss"></style>
